<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="600" height="600"></canvas>
	<button id="animateButton">Animate</button>
</body>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript" src="Sprite.js"></script>
<script type="text/javascript" src="SpriteSheetPainter.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),
		animateButton = document.getElementById('animateButton'),
		spritesheet = new Image(),
		cells = [
			{ left: 0, top: 0, width: 205, height: 205 },
			{ left: 205, top: 0, width: 205, height: 205 },
			{ left: 410, top: 0, width: 205, height: 205 },
			{ left: 615, top: 0, width: 205, height: 205 },
			{ left: 820, top: 0, width: 205, height: 205 },
			{ left: 1025, top: 0, width: 205, height: 205 },
			{ left: 1230, top: 0, width: 205, height: 205 },
			{ left: 1435, top: 0, width: 205, height: 205 },
			{ left: 1640, top: 0, width: 205, height: 205 },
			{ left: 1845, top: 0, width: 205, height: 205 },
			{ left: 2050, top: 0, width: 205, height: 205 },
			{ left: 2255, top: 0, width: 205, height: 205 },
			{ left: 2460, top: 0, width: 205, height: 205 },
			{ left: 2665, top: 0, width: 205, height: 205 },
			{ left: 2870, top: 0, width: 205, height: 205 },
			{ left: 3075, top: 0, width: 205, height: 205 },
			{ left: 3280, top: 0, width: 205, height: 205 },
			{ left: 3485, top: 0, width: 205, height: 205 },
			{ left: 3690, top: 0, width: 205, height: 205 },
			{ left: 3895, top: 0, width: 205, height: 205 },
			{ left: 4100, top: 0, width: 205, height: 205 },
			{ left: 4305, top: 0, width: 205, height: 205 },
			{ left: 4510, top: 0, width: 205, height: 205 },
			{ left: 4715, top: 0, width: 205, height: 205 },
			{ left: 4920, top: 0, width: 205, height: 205 },
			{ left: 5125, top: 0, width: 205, height: 205 }
		],
		sprite = new Sprite('longxingdonghai', new SpriteSheetPainter(cells)),
		interval,
		lastAdvance = 0,
		paused = true,
		PAGEFILP_INTERVAL = 33;

// Functions.....................................................................

	// 绘制背景
	function drawBackground(){
		var STEP_Y = 12,
			i = canvas.height;

		while(i < STEP_Y * 4){
			context.beginPath();
			context.moveTo(0, i);
			context.lineTo(canvas.width, i);
			context.stroke();
			i -= STEP_Y;
		}
	}

	// 暂停动画
	function pauseAnimation(){
		animateButton.textContent = 'Animate';
		paused = true;
	}

	// 开启动画
	function startAnimation(){
		animateButton.textContent = 'Pause';
		paused = false;
		lastAdvance = +new Date();
		window.requestNextAnimationFrame(animate);
	}

// Event handlers...................................................................

	// 动画按钮
	animateButton.onclick = function(e){
		(animateButton.textContent === 'Animate') ? startAnimation() : pauseAnimation();
	};

// Animation.......................................................................

	// 动画
	function animate(time){
		time = +new Date();

		if(!paused){
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawBackground();
			context.drawImage(spritesheet, 0, 0);
			sprite.paint(context);

			if(time - lastAdvance > PAGEFILP_INTERVAL){
				sprite.painter.advance();
				lastAdvance = time;
			}

			window.requestNextAnimationFrame(animate);
		}
	}

// Initialization.................................................................

	spritesheet.src = 'spritesheet.png';
	spritesheet.onload = function(e){
		context.drawImage(spritesheet, 0, 0);
	};

	sprite.left = 100;
	sprite.top = 300;
	context.strokeStyle = 'lightgray';
	context.lineWidth = 0.5;

	drawBackground();
</script>
</html>